<template>
  <div id="page-profiles-reset-password">
    <h2>修改密码</h2>

    <Card>
      <Row>
        <Col span="8" offset="8">
          <Form
          ref="form"
          :model="form.data"
          :rules="ruleValidate"
          :label-width="80"
          class="club-info-form mt20">
            <FormItem prop="pwd" label="旧密码">
              <Input v-model="form.data.pwd" type="password" placeholder="请输入旧密码"></Input>
            </FormItem>
            <FormItem prop="newPwd" label="新密码">
              <Input v-model="form.data.newPwd" type="password" placeholder="请输入新密码"></Input>
            </FormItem>
            <FormItem prop="newPwdAgain" label="确认密码">
              <Input v-model="form.data.newPwdAgain" type="password" placeholder="请再次输入新密码"></Input>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                size="large"
                :loading="isSubmiting"
                @click="onSubmit('form')">
                确认
              </Button>
              <Button
                size="large"
                class="ml20"
                @click="goBack()">
                返回
              </Button>
            </FormItem>
          </Form>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
  import profilesApi from '@/api/profiles'

  export default {
    name: 'page-profiles-reset-password',
    data () {
      let validatePassAgain = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码'))
        } else if (value !== this.form.data.newPwd) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }

      return {
        isSubmiting: false,
        ruleValidate: {
          pwd: [
            { required: true, message: '请输入旧密码', trigger: 'blur' }
          ],
          newPwd: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
          ],
          newPwdAgain: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            { validator: validatePassAgain, trigger: 'change' }
          ]
        },
        form: {
          data: {}
        }
      }
    },
    methods: {
      onSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.isSubmiting = true
            this.resetPwd()
          } else {
            return false
          }

          // 5秒后可以重试
          setTimeout(() => {
            if (this.isSubmiting === true) {
              this.isSubmiting = false
            }
          }, 5000)
        })
      },
      async resetPwd () {
        const { body } = await profilesApi.resetPassword(this.form.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('修改成功')
          this.$router.push({path: '/profiles/security'})
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.isSubmiting = false
          }, 500)
        }
      },
      goBack () {
        this.$router.push({path: '/profiles/security'})
      }
    },
    async mounted () {
    }
  }
</script>

<style lang="less">
</style>

